<template>
  <div class="my-pending-main">
    <div class="head-row">
      <div class="left-head">
        <img class="head-logo" src="@/assets/dashboard/myPending/icon.png" alt="">
        <span class="head-title">我的待办</span>
        <div class="head-status-list">
          <div class="head-status" :class="{active:headFormData.status===''}" @click="changeHeadStatus('')">全部</div>
          <div class="head-status" :class="{active:headFormData.status==='0'}" @click="changeHeadStatus('0')">未完成({{ unfinishedCount > 99 ? '99+' : unfinishedCount}})</div>
          <div class="head-status" :class="{active:headFormData.status==='1'}" @click="changeHeadStatus('1')">已完成</div>
        </div>
      </div>
      <div class="right-head">
        <div class="date-btn">
          <span @click="showDateSearch=!showDateSearch">日期筛选</span>
          <img @click="showDateSearch=!showDateSearch" src="@/assets/dashboard/myPending/arrow.png" alt="">
          <date-search
            v-if="showDateSearch"
            :now-publish-time-start="headFormData.publishTime[0]"
            :now-publish-time-end="headFormData.publishTime[1]"
            :now-finish-time-start="headFormData.finishTime[0]"
            :now-finish-time-end="headFormData.finishTime[1]"
            @save="saveDateSearch"
          ></date-search>
        </div>
        <div class="department-btn">
          <span>组织架构</span>
          <img src="@/assets/dashboard/myPending/arrow.png" alt="">
        </div>
        <div class="divider"></div>
        <div class="view-mode-btn" v-if="mode==='card'" @click="changeViewMode('list')">
          <img src="@/assets/dashboard/myPending/view-list.png" alt="">
          <span>列表视图</span>
        </div>
        <div class="view-mode-btn" v-if="mode==='list'" @click="changeViewMode('card')">
          <img src="@/assets/dashboard/myPending/view-card.png" alt="">
          <span>卡片视图</span>
        </div>
      </div>
    </div>
    <div class="content-row">
      <div class="left-menu" :class="{ small: !showMenu }">
        <div class="top">
          <div class="search-box">
            <img src="@/assets/dashboard/myPending/search.png" alt="">
            <input type="text" :placeholder="showMenu?'请输入关键词':''" v-model="headFormData.keyword" />
          </div>
          <div
            class="menu-item"
            :class="{ active: item.active }"
            v-for="(item,index) in menuList"
            :key="index"
            @click="changeMenu(index)"
          >
            <img :src="item.active ? item.imgActive : item.img" alt="">
            <span v-if="showMenu">{{ item.text }}</span>
          </div>
        </div>
        <div class="bottom">
          <img src="@/assets/dashboard/myPending/toggle1.png" alt="" @click="showMenu=true" v-if="!showMenu">
          <img src="@/assets/dashboard/myPending/toggle2.png" alt="" @click="showMenu=false" v-else>
        </div>
      </div>
      <div class="right-content">
        <template v-if="mode==='card'">
          <div ref="cardBox" class="card-box" @scroll="cardScroll">
            <div
              class="card-item"
              :class="'card-item-'+item.type"
              v-for="(item,index) in cardList"
              @click="checkPending(item)"
            >
              <div class="bg">
                <div class="status-corner" v-if="item.status==='0'">
                  {{ item.type === '2' ? '未审核' : '未完成' }}
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="subtitle">{{ item.subtitle }}</div>
                <div class="footer">
                  <div v-if="item.type==='1'">
                    <img src="@/assets/dashboard/myPending/icon-gongwendaiban.png" alt="">
                    <span>公文待办</span>
                  </div>
                  <div v-if="item.type==='2'">
                    <img src="@/assets/dashboard/myPending/icon-zichanshenhe.png" alt="">
                    <span>资产审核</span>
                  </div>
                  <div v-if="item.type==='3'">
                    <img src="@/assets/dashboard/myPending/icon-richengtixing.png" alt="">
                    <span>日程提醒</span>
                  </div>
                  <span>{{ item.createTime }}</span>
                </div>
              </div>
            </div>
            <div class="last-end" v-if="cardList.length >= cardPage.total">
              <div class="line"></div>
              <div class="text">以显示全部结果</div>
              <div class="line"></div>
            </div>
          </div>
        </template>
        <template v-if="mode==='list'">
          <div class="list-box">
            <div class="table-box">
              <div class="table-content">
                <el-table
                  border
                  height="100%"
                  max-height="100%"
                  :data="tableData" class="table-table">
                  <el-table-column
                    prop="title"
                    label="待办名称">
                  </el-table-column>
                  <el-table-column
                    prop="type"
                    label="待办类型"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <div class="td-type" :class="'td-type-'+scope.row.type">{{ getTypeName(scope.row) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="待办状态"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <div class="td-status">
                        <div class="td-status-dot-red" v-if="scope.row.status==='0'"></div>
                        <div class="td-status-dot-green" v-if="scope.row.status==='1'"></div>
                        <span>{{ getStatusName(scope.row) }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="发布时间"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="operation"
                    label="操作"
                    width="80"
                  >
                    <template slot-scope="scope">
                      <span class="td-operation-btn" v-if="scope.row.status==='0' && scope.row.type==='2'">审核</span>
                      <span class="td-operation-btn" v-else @click="checkPending(scope.row)">查看</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="table-page">
                <span class="total">共{{ listPage.total }}条数据</span>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="listPage.total"
                  @current-change="handleCurrentChangeList"
                  @handleSizeChange="handleSizeChangeList"
                  :page-size="listPage.pageSize"
                  :current-page="listPage.pageNo"
                  :pager-count="5"
                />
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <document-pending
      v-if="documentPendingModal.show"
      :document-data="documentPendingModal.documentData"
      @close="documentPendingModal.show=false"
    ></document-pending>
    <assets-audit
      v-if="assetsAuditModal.show"
      :assets-data="assetsAuditModal.assetsData"
      @close="assetsAuditModal.show=false"
    ></assets-audit>
  </div>
</template>

<script>
import { mapState } from "vuex";
import menuImg0 from '@/assets/dashboard/myPending/menu_0.png'
import menuImg1 from '@/assets/dashboard/myPending/menu_1.png'
import menuImg2 from '@/assets/dashboard/myPending/menu_2.png'
import menuImg3 from '@/assets/dashboard/myPending/menu_3.png'
import menuImg0_active from '@/assets/dashboard/myPending/menu_0_active.png'
import menuImg1_active from '@/assets/dashboard/myPending/menu_1_active.png'
import menuImg2_active from '@/assets/dashboard/myPending/menu_2_active.png'
import menuImg3_active from '@/assets/dashboard/myPending/menu_3_active.png'
import dateSearch from '../components/myPending/dateSearch.vue'
import documentPending from '../components/myPending/documentPending.vue'
import assetsAudit from '../components/myPending/assetsAudit.vue'

export default {
  name: "myPending",
  props: {},
  components: {
    dateSearch, documentPending, assetsAudit
  },
  data() {
    return {
      headFormData: {
        status: '',
        publishTime: ['',''],
        finishTime: ['',''],
        departmentId: '',
        keyword: '',
      },
      menuList: [
        { text: '全部待办', img: menuImg0, imgActive: menuImg0_active, value: '', active: true },
        { text: '公文待办', img: menuImg1, imgActive: menuImg1_active, value: '1', active: false },
        { text: '资产审核', img: menuImg2, imgActive: menuImg2_active, value: '2', active: false },
        { text: '日程提醒', img: menuImg3, imgActive: menuImg3_active, value: '3', active: false },
      ],
      unfinishedCount: 200,//未完成数量
      showMenu: true,
      tableData: [], //列表格式数据
      listPage: {
        total: 1000,
        pageSize: 10,
        pageNo: 1,
      },
      cardList: [], //卡片格式数据
      cardPage: {
        total: 0,
        pageSize: 16,
        pageNo: 1,
      },
      showDateSearch: false,
      documentPendingModal: {
        show: false,
        documentData: {},
      },
      assetsAuditModal: {
        show: false,
        assetsData: {},
      },
    }
  },
  computed: {
    ...mapState(['myInfo']),
    mode: {
      get(){
        return this.$store.state.myPending.mode
      },
      set(val){
        this.$store.commit('setMyPendingMode', val)
      }
    },
    nowMenu() {
      let menu = this.menuList.find((item)=>{
        return item.active
      })
      return menu ? menu.value : ''
    },
  },
  mounted() {
    this.cardList = [
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '固定资产审核',
        subtitle: '申请人：张三四',
        assetsType: 'purchase',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '调拨流程审核',
        subtitle: '申请人：张三四',
        assetsType: 'transfer',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '补货采购受理',
        subtitle: '申请人：张三四',
        assetsType: 'replenishProcurement',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '补货采购受理审核',
        subtitle: '申请人：张三四',
        assetsType: 'replenishProcurementAudit',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '低值易耗品申购审核',
        subtitle: '申请人：王五六',
        assetsType: 'consumables',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '借用流程审核',
        subtitle: '申请人：王五六',
        assetsType: 'borrow',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '固定资产采购受理',
        subtitle: '申请人：张三四',
        assetsType: 'purchaseProcurement',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '固定资产采购受理审核',
        subtitle: '申请人：张三四',
        assetsType: 'purchaseProcurementAudit',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '低值易耗品申领审核',
        subtitle: '申请人：王五六',
        assetsType: 'claimants',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '报废流程审核',
        subtitle: '申请人：王五六',
        assetsType: 'scrap',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '低值易耗品采购受理',
        subtitle: '申请人：王五六',
        assetsType: 'consumablesProcurement',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '低值易耗品采购受理审核',
        subtitle: '申请人：王五六',
        assetsType: 'consumablesProcurementAudit',
      },
      {
        type: '1',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '盛辉[2023]人10号',
        subtitle: '关于组织2023年第一期营业部经理培训的通知',
      },
      {
        type: '1',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '盛辉[2023]人10号',
        subtitle: '关于组织2023年第一期营业部经理培训的通知',
      },
      {
        type: '3',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '我的日程',
        subtitle: '集团年度会议提醒',
      },
      {
        type: '3',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '我的日程',
        subtitle: '集团年度会议提醒',
      },
      {
        type: '1',
        status: '1',
        createTime: '2023-05-19 14:30:39',
        title: '盛辉[2023]人10号',
        subtitle: '关于组织2023年第一期营业部经理培训的通知',
      },
      {
        type: '2',
        status: '1',
        createTime: '2023-05-19 14:30:39',
        title: '补货申领审核',
        subtitle: '申请人：张三四',
        assetsType: 'replenish',
      },
    ]
    this.tableData = [
      {
        type: '1',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '盛辉[2023]人10号',
        subtitle: '关于组织2023年第一期营业部经理培训的通知',
      },
      {
        type: '1',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '盛辉[2023]人10号',
        subtitle: '关于组织2023年第一期营业部经理培训的通知',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '固定资产审核',
        subtitle: '申请人：张三四',
        assetsType: 'purchase',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '调拨流程审核',
        subtitle: '申请人：张三四',
        assetsType: 'transfer',
      },
      {
        type: '2',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '补货采购受理',
        subtitle: '申请人：张三四',
        assetsType: 'replenishProcurement',
      },
      {
        type: '1',
        status: '1',
        createTime: '2023-05-19 14:30:39',
        title: '盛辉[2023]人10号',
        subtitle: '关于组织2023年第一期营业部经理培训的通知',
      },
      {
        type: '2',
        status: '1',
        createTime: '2023-05-19 14:30:39',
        title: '采购确认流程',
        subtitle: '申请人：张三四',
        assetsType: 'replenish',
      },
      {
        type: '3',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '我的日程',
        subtitle: '集团年度会议提醒',
      },
      {
        type: '3',
        status: '0',
        createTime: '2023-05-19 14:30:39',
        title: '我的日程',
        subtitle: '集团年度会议提醒',
      },
      {
        type: '1',
        status: '1',
        createTime: '2023-05-19 14:30:39',
        title: '盛辉[2023]人10号',
        subtitle: '关于组织2023年第一期营业部经理培训的通知',
      },
      {
        type: '2',
        status: '1',
        createTime: '2023-05-19 14:30:39',
        title: '补货申领审核',
        subtitle: '申请人：张三四',
        assetsType: 'replenish',
      },
    ]
  },
  methods: {
    //切换顶部状态
    changeHeadStatus(status){
      this.headFormData.status = status
    },
    //切换浏览模式
    changeViewMode(mode){
      this.mode = mode
    },
    //切换左侧菜单
    changeMenu(i){
      this.menuList.forEach((item,index)=>{
        if(i===index){
          item.active = true
        }
        else{
          item.active = false
        }
      })
    },
    //卡片列表滚动
    cardScroll(){
      const container = this.$refs['cardBox']
      if (container.clientHeight + container.scrollTop >= container.scrollHeight) {
        console.log("已经滚动到底部")
      }
    },
    //分页
    handleCurrentChangeList(val) {
      this.listPage.pageNo = val
    },
    handleSizeChangeList(val) {
      this.listPage.pageSize = val
    },
    //待办类型名称
    getTypeName(row){
      let menu = this.menuList.find((item)=>{
        return item.value === row.type
      })
      return menu ? menu.text : ''
    },
    //待办状态名称
    getStatusName(row){
      if(row.status === '1'){
        return '已完成'
      }
      if(row.status === '0'){
        return row.type === '2' ? '未审核' : '未完成'
      }
      return ''
    },
    //日期筛选
    closeDateSearch(){
      this.showDateSearch = false
    },
    saveDateSearch(publishTimeStart,publishTimeEnd,finishTimeStart,finishTimeEnd){
      this.headFormData.publishTime = [publishTimeStart, publishTimeEnd]
      this.headFormData.finishTime = [finishTimeStart, finishTimeEnd]
      this.closeDateSearch()
    },
    //查看
    checkPending(item){
      //查看公文待办
      if(item.type === '1'){
        this.documentPendingModal.documentData = this.$utilJs.deepClone(item)
        this.documentPendingModal.show = true
      }
      //查看资产代办
      else if(item.type === '2'){
        this.assetsAuditModal.assetsData = this.$utilJs.deepClone(item)
        console.log(item,66666)
        this.assetsAuditModal.show = true
      }
    },
  },
  watch: {
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
@headHeight: 56px;
.my-pending-main {
  width: 100%;
  height: calc(100vh - 40px);
  overflow: hidden;
  background-color: #fff;
  position: relative;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  .head-row {
    width: 100%;
    height: @headHeight;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 16px;
    .left-head {
      display: flex;
      align-items: center;
      .head-logo {
        width: 32px;
        height: 32px;
      }
      .head-title {
        margin-left: 12px;
        color: @textColor;
        font-size: 16px;
        line-height: 24px;
      }
      .head-status-list {
        margin-left: 52px;
        display: flex;
        align-items: center;
        .head-status {
          padding: 4px 16px;
          color: rgba(0,0,0,0.66);
          font-size: 14px;
          line-height: 22px;
          border-radius: 15px;
          cursor: pointer;
          &:hover {
            color: @ntalkColor;
          }
          &.active {
            border: 1px solid @ntalkColor;
            color: @ntalkColor;
            padding: 3px 15px;
          }

        }
      }
    }
    .right-head {
      display: flex;
      align-items: center;
      .date-btn, .department-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 94px;
        height: 24px;
        cursor: pointer;
        margin-right: 4px;
        position: relative;
        &:hover {
          background-color: #f2f3f6;
          border-radius: 4px;
        }
        span {
          color: rgba(0,0,0,0.66);
          font-size: 14px;
          padding-right: 8px;
        }
        img {
          width: 14px;
          height: 14px;
          transform: translateY(1px);
        }
      }
      .divider {
        width: 1px;
        height: 16px;
        background-color: #f2f3f6;
      }
      .view-mode-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 94px;
        height: 24px;
        cursor: pointer;
        margin-left: 4px;
        &:hover {
          background-color: #f2f3f6;
          border-radius: 4px;
        }
        span {
          color: rgba(0,0,0,0.66);
          font-size: 14px;
          margin-left: 8px;
        }
        img {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .content-row {
    width: 100%;
    height: calc(100% - @headHeight);
    background-color: #f1f2f5;
    display: flex;
    .left-menu {
      width: 160px;
      height: 100%;
      flex-shrink: 0;
      background-color: #fff;
      box-sizing: border-box;
      border-top: 1px solid #f1f2f5;
      transition: 0.5s;
      &.small {
        width: 58px;
      }
      .top {
        width: 100%;
        height: calc(100% - 42px);
        box-sizing: border-box;
        padding: 12px 8px 0;
        .search-box {
          width: 100%;
          height: 32px;
          box-sizing: border-box;
          border-radius: 6px;
          border: 1px solid rgba(0,0,0,0.15);
          padding-left: 12px;
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          img {
            width: 16px;
            height: 16px;
            user-select: none;
          }
          input {
            width: calc(100% - 24px);
            all: unset;
            border: none;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
            overflow: hidden;
            &::placeholder {
              color: #bebcb2;
            }
          }
        }
        .menu-item {
          width: 100%;
          display: flex;
          align-items: center;
          height: 42px;
          margin-bottom: 4px;
          border-radius: 4px;
          cursor: pointer;
          background-color: #fff;
          img {
            width: 16px;
            height: 16px;
            margin-left: 13px;
          }
          span {
            font-size: 14px;
            line-height: 22px;
            color: rgba(0,0,0,0.66);
            margin-left: 8px;
            white-space: nowrap;
            overflow: hidden;
          }
          &:hover {
            background-color: #f0f0f0;
          }
          &.active {
            background-color: #fff0e5;
            span { color: @ntalkColor; }
          }
        }
      }
      .bottom {
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        border-top: 1px solid rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 17px;
        img {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
    }
    .right-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .card-box {
        box-sizing: border-box;
        padding: 16px 16px 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        &::-webkit-scrollbar {
          width: 6px;
        }
        .card-item {
          width: calc(50% - 6px);
          height: 102px;
          border-radius: 8px;
          margin-bottom: 12px;
          cursor: pointer;
          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
          overflow: hidden;
          .bg {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: bottom 0 right -4px;
            box-sizing: border-box;
            padding: 14px 12px;
            position: relative;
            .status-corner {
              position: absolute;
              right: 0;
              top: 0;
              width: 52px;
              height: 22px;
              line-height: 22px;
              text-align: center;
              border-bottom-left-radius: 8px;
              color: #fff;
              font-size: 12px;
            }
            .title {
              width: 100%;
              height: 22px;
              line-height: 22px;
              font-size: 14px;
              color: @textColor;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .subtitle {
              width: 100%;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              color: #565551;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-top: 4px;
            }
            .footer {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #8d8c85;
              font-size: 12px;
              height: 20px;
              line-height: 20px;
              margin-top: 8px;
              div {
                display: flex;
                align-items: center;
                img {
                  width: 14px;
                  height: 14px;
                  margin-right: 4px;
                }
              }
            }
          }
          &.card-item-1 {
            background: linear-gradient(180deg, #FFF0E6 0%, #FFFFFF 86%);
            .bg {
              background-image: url('~@/assets/dashboard/myPending/bg-gongwendaiban.png');
              .status-corner { background-color: #e67529; }
            }
          }
          &.card-item-2 {
            background: linear-gradient(180deg, #E6EEFF 0%, #FFFFFF 86%);
            .bg {
              background-image: url('~@/assets/dashboard/myPending/bg-zichanshenhe.png');
              .status-corner { background-color: #2e74ff; }
            }
          }
          &.card-item-3 {
            background: linear-gradient(180deg, #E6FFFF 2%, #FFFFFF 86%);
            .bg {
              background-image: url('~@/assets/dashboard/myPending/bg-richengtixing.png');
              .status-corner { background-color: #13c2c2; }
            }
          }
        }
        .last-end {
          width: 100%;
          display: flex;
          align-items: center;
          //margin: 8px 0;
          margin-bottom: 8px;
          .text {
            margin: 0 8px;
            flex-shrink: 0;
            color: #cac8be;
            font-size: 12px;
            line-height: 20px;
          }
          .line {
            width: 50%;
            height: 1px;
            background-color: #cac8be;
          }
        }
      }
      .list-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 16px;
        .table-box {
          width: 100%;
          height: 100%;
          background-color: #fff;
          border-radius: 6px;
          box-sizing: border-box;
          border: 1px solid #f0f0f0;
          overflow: hidden;
          .table-content {
            width: 100%;
            height: calc(100% - 56px);
            .table-table {
              width: 100%;
              height: 100%;
              /deep/ .td-type {
                border: 1px solid;
                width: fit-content;
                padding: 0 8px;
                border-radius: 4px;
                line-height: 20px;
                font-size: 12px;
                &.td-type-1 {
                  color: #e67529;
                  border-color: #ffcead;
                }
                &.td-type-2 {
                  color: #2e74ff;
                  border-color: #adc8ff;
                }
                &.td-type-3 {
                  color: #13c2c2;
                  border-color: #aafafa;
                }
              }
              /deep/ .td-status {
                display: flex;
                align-items: center;
                .td-status-dot-red {
                  width: 6px;
                  height: 6px;
                  border-radius: 50%;
                  background-color: #ff4040;
                  margin-right: 8px;
                }
                .td-status-dot-green {
                  width: 6px;
                  height: 6px;
                  border-radius: 50%;
                  background-color: #35cc8d;
                  margin-right: 8px;
                }
              }
              /deep/ .td-operation-btn {
                color: @ntalkColor;
                cursor: pointer;
              }
            }
          }
          .table-page {
            width: 100%;
            height: 56px;
            box-sizing: border-box;
            border-top: 1px solid #f2f3f6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            .total {
              color: rgba(0,0,0,0.66);
              font-size: 14px;
              line-height: 22px;
            }
            /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
              background-color: @ntalkColor;
            }
            /deep/ .el-pagination.is-background .el-pager li.active {
              background-color: @ntalkColor;
            }
            /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
              color: @ntalkColor;
            }
            /deep/ .el-pagination.is-background .el-pager li:hover {
              color: @ntalkColor;
            }
          }
        }
      }
    }
  }
}
</style>
